<template>
  <div id="home" class="pa-4">
    <div>
      <v-alert prominent type="info" v-if="!isAuthenticated">
        <v-row align="center">
          <v-col class="grow">
            <div class="title">登录即可查看直播内容</div>
          </v-col>
          <v-col class="shrink">
            <v-btn to="/signin">去登录</v-btn>
          </v-col>
        </v-row>
      </v-alert>
    </div>
    <v-container fluid>
      <v-alert prominent type="error" v-if="errored">
        <v-row align="center"  >
          <v-col class="grow">
            <div class="title">Error!</div>
            <div>
              出现错误
            </div>
          </v-col>
          <v-col class="shrink">
            <v-btn @click="getlives">重试</v-btn>
          </v-col>
        </v-row>
      </v-alert>

      <main v-if="isAuthenticated">
        <h3 class="headline font-weight-medium">推荐</h3>
        <v-row>
          <v-col cols="12" sm="6" md="4" lg="3" v-for="(live, i) in loading ? 12 : lives" :key="i" class="mx-xs-auto">
            <v-skeleton-loader type="card-avatar" :loading="loading">
              <live-card :card="{ maxWidth: 350 }" :live="live" :channel="live.userId"></live-card>
            </v-skeleton-loader>
          </v-col>
          <v-col class="text-center" v-if="lives.length === 0 && !loading">
            <p>暂无直播</p>
          </v-col>
          <v-col cols="12" sm="12" md="12" lg="12">
            <infinite-loading @infinite="getlives">
              <div slot="spinner">
                <v-progress-circular indeterminate color="red"></v-progress-circular>
              </div>
              <div slot="no-results"></div>
              <span slot="no-more"></span>
              <div slot="error" slot-scope="{ trigger }">
                <v-alert prominent type="error">
                  <v-row align="center">
                    <v-col class="grow">
                      <div class="title">Error!</div>
                      <div>
                        似乎出现了错误。不要担心！尝试手动获取直播列表
                      </div>
                    </v-col>
                    <v-col class="shrink">
                      <v-btn @click="trigger">重试</v-btn>
                    </v-col>
                  </v-row>
                </v-alert>
              </div>
            </infinite-loading>
          </v-col>
        </v-row>
      </main>
    </v-container>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'
import moment from 'moment'
import { liveList } from '../services/LiveRequest';
import LiveCard from '../components/LiveCard.vue';
import { mapGetters } from 'vuex';
//import liveservice from '@/services/liveservice'

export default {
  name: 'Live',
  data: () => ({
    loading: false,
    loaded: false,
    errored: false,
    lives: [],
    page: 1
  }),
  computed: {
    ...mapGetters(['isAuthenticated'])
  },
  created() {
    // if (window.location.href.indexOf("#reloaded") == -1) {
    //   window.location.href = window.location.href + "#reloaded";
    //   window.location.reload();
    // }
  },
  methods: {
    // mounted() {
    //   console.log("请求视频")
    //   list({
    //     pageIndex: 1,
    //     pageSize: 12
    //   }).then((res) => {
    //     if (res.data.code == 200) {
    //       this.loaded = true
    //       this.lives = res.data.list
    //     }
    //   })
    // },
    async getlives($state) {
      if(!this.isAuthenticated)
        return
      if (!this.loaded) {
        this.loading = true
      }
      const lives = await liveList({
        pageIndex: this.page,
        pageSize: 12
      })
        .catch((err) => {
          console.log(err)
          this.errored = true
        })
        .finally(() => {
          this.loading = false
        })
      if (typeof lives === 'undefined') return
      if (lives.data.data.list.length) {
        this.page += 1
        this.lives.push(...lives.data.data.list)
        $state.loaded()
        this.loaded = true
      } else {
        $state.complete()
      }
    },
    dateFormatter(date) {
      return moment(date).fromNow()
    }
  },
  components: {
    LiveCard,
    InfiniteLoading
  }
}
</script>

<style lang="scss">
.card {
  background: #f9f9f9 !important;
}
</style>